<template>
    <a-layout style="width:100%;height:100%">
        <a-layout-header class="header" style="height:80px">
            <div class="platuser">
                 <a-dropdown placement="bottomCenter">
                    <a-avatar style="background-color: #87d068">
                        <template #icon>
                            <UserOutlined />
                        </template>
                    </a-avatar>
                    <template #overlay>
                    <a-menu>
                        <a-menu-item @click="showModal">
                            修改密码
                        </a-menu-item>
                        <a-menu-item @click="logout">
                            退出登录
                        </a-menu-item>
                    </a-menu>
                    </template>
                </a-dropdown>
            </div>
            <div class="top-bg"></div>
            <div class="circle">{{familyName}}</div>
            <div class="site-name">氏家族家谱管理系统</div>            
        </a-layout-header>
        <a-layout style="width:100%;">
            <a-layout-sider class="sider">
                <a-menu
                    mode="inline"
                    v-model:selectedKeys="selectedKeys"
                    v-model:openKeys="openKeys"
                    >
                    <template v-for="item in navlist" :key="item.key">
                        <a-sub-menu :key="item.key" v-if="item.children">
                            <template #title><span class="iconfont" :class="item.icon"></span>{{item.name}}</template>
                            <a-menu-item :key="i.key" v-for="i in item.children">
                                <router-link :to="i.path">{{i.name}}</router-link>
                            </a-menu-item>
                        </a-sub-menu>
                        <a-menu-item :key="item.key" v-else>
                            <router-link :to="item.path"><span class="iconfont" :class="item.icon"></span>{{item.name}}</router-link>
                        </a-menu-item>
                    </template>
                </a-menu>
            </a-layout-sider>
            <a-layout-content style="padding:16px">
                <router-view />
            </a-layout-content>
        </a-layout>

        <a-modal v-model:visible="editVisible" title="修改密码" @ok="handleUpdate" :width="500" class="update-password">
            <a-row>
                <a-col :span="6" class="label-name"><span class="red">*</span>旧密码</a-col>
                <a-col :span="18">
                    <a-input-password v-model:value="oldPassword" />
                </a-col>
            </a-row>
            <div class="blank"></div>
            <a-row>
                <a-col :span="6" class="label-name"><span class="red">*</span>新密码</a-col>
                <a-col :span="18">
                    <a-input-password v-model:value="password" />
                </a-col>
            </a-row>
            <div class="blank"></div>
            <a-row>
                <a-col :span="6" class="label-name"><span class="red">*</span>确认密码</a-col>
                <a-col :span="18">
                    <a-input-password v-model:value="rePassword" />
                </a-col>
            </a-row>
        </a-modal>
    </a-layout>    
</template>

<script>
import Http from '@/until/http';
import {UserOutlined,QuestionCircleOutlined} from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';
import { useRouter,useRoute } from 'vue-router';
import { defineComponent, reactive, toRefs,createVNode, onMounted, computed, watch } from 'vue';
import { messageTips } from '@/until/tools';
import config from '@/until/configs';
export default defineComponent({
    components:{UserOutlined,QuestionCircleOutlined},
    setup() {
        const router = useRouter();
        const route = useRoute();
        const state = reactive({
            editVisible:false,
            oldPassword: '',
            password: '',
            rePassword:'',
            selectedKeys:[],
            openKeys:[],
            navlist:[
                {key:'1',name:'系统主页',path:'/index',icon:'icon-shouyefill'},
                {key:'2',name:'成员管理',path:'/member',icon:'icon-chengyuan'},
                {key:'3',name:'辈分管理',path:'/generation',icon:'icon-dengji'},
                {key:'4',name:'关系查询',path:'/relation',icon:'icon-lishuguanxi'},
                {key:'10',name:'名人轶事',path:'/famous',icon:'icon-mingrentang'},
                {key:'5',name:'家族风采',path:'/elegant',icon:'icon-fengcai',children:[
                    {key:'6',name:'祠堂',path:'/elegant_ancestral'},
                    {key:'7',name:'相册',path:'/elegant_album'},
                    {key:'8',name:'视频',path:'/elegant_video'}
                ]},
                {key:'9',name:'家族纪事',path:'/instantbook',icon:'icon-leftfont-44'},
            ],
            familyName:config.familyName
        });

        const path = computed(()=>{
            return route.path;
        })

        const showModal = ()=>{
            Object.assign(state,{
                editVisible:true
            })
        }

        const handleUpdate = ()=>{
            if(state.oldPassword.trim()==='') {
                messageTips('请输入原密码',2);
                return false;
            }
            if(state.password.trim()==='') {
                messageTips('请输入新密码',2);
                return false;
            }
            if(state.rePassword.trim()==='') {
                messageTips('请输入确认密码',2);
                return false;
            }
            if(state.password.trim()!==state.rePassword.trim()) {
                messageTips('两次密码不一致',2);
                return false;
            }
            Http.updatePassword({
                oldPass:state.oldPassword,
                pass:state.password
            }).then(res=>{
                if(res) {
                    if(res.success) {
                        Object.assign(state,{
                            editVisible:false
                        })
                        messageTips(res.message,3);
                        setTimeout(()=>{
							router.push('/login');
						},1000);
                    } else{
                        messageTips(res.message,1);
                    }
                }
            })            
        }

        const logout = ()=>{
            Modal.confirm({
                title:'提示',
                content:'您确定要退出吗？',
                centered:true,
                icon: createVNode(QuestionCircleOutlined),
                onOk() {
                    Http.logout().then(res=>{
                        if(res&&res.success) {
                            router.push('/login');
                        }
                    })
                }
            })
        }

        const getSelectKey = (value)=>{
            state.navlist.some(item=>{
                if(item.path===value) {
                    Object.assign(state,{
                        selectedKeys:[item.key]
                    });
                    return true;
                } else {
                    if(item.children) {
                        item.children.some(i=>{
                            if(i.path===value) {
                                Object.assign(state,{
                                    selectedKeys:[i.key]
                                });
                                
                                let ar = [...state.openKeys];
                                if(state.openKeys.indexOf(item.key)===-1) {
                                    ar.push(item.key)
                                    Object.assign(state,{
                                        openKeys:ar
                                    });
                                }
                                return true;
                            }
                        })
                    }
                }
            })
        }

        watch(()=>path.value,(value)=>{
            getSelectKey(value)
        })

        onMounted(()=>{
            getSelectKey(path.value)
        })
        


        return {
            ...toRefs(state),
            showModal,
            handleUpdate,
            logout
        }
    }
})
</script>
<style lang="scss">
.update-password {
    .blank {
        height:20px;
    }
    .label-name {
        text-align: right;
        padding-right:20px;
        .red {
            color:#f00;
        }
    }
}
</style>